<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>淘宝网-淘！我喜欢</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="wrapper">
        <div class="top-nav-wrap">
            <div class="top-nav">
                <ul class="top-nav-l">
                    <li class="top-nav-menu">
						<a href="#">
							<span>中国大陆</span>
							<span class="bgPic xsjPic"></span>
						</a>
                    </li>
                    <li class="top-nav-menu">
                        <a href="#" class="login">亲，请登录</a>
                        <a href="#">免费注册</a>
                    </li>
                    <li class="top-nav-menu">
                        <a href="#">手机逛淘宝</a>
                    </li>
                </ul>
                <ul class="top-nav-r">
                    <li class="top-nav-menu">
                        <a href="#">
							<span>我的淘宝</span>
							<span class="bgPic xsjPic"></span>
						</a>
                    </li>
                    <li class="top-nav-menu">
                        <a href="#">
                            <span class="bgPic shopCarPic"></span>
                            <span>购物车</span>
                            <span class="bgPic xsjPic"></span>
                        </a>
                    </li>
                    <li class="top-nav-menu">
                        <a href="#">
                            <span class="bgPic likePic"></span>
                            <span>收藏夹</span>
							<span class="bgPic xsjPic"></span>
                        </a>
                    </li>
                    <li class="top-nav-menu">
                        <a href="#">商品分类</a>
                    </li>
                    <li class="top-nav-menu cutOff">
                            <span>|</span>
                    </li>
                    <li class="top-nav-menu seller">
                        <a href="#">
							<span>卖家中心</span>
					        <span class="bgPic xsjPic"></span>	
						</a>
                    </li>
                    <li class="top-nav-menu">
                        <a href="#">
							<span>联系客服</span>
							<span class="bgPic xsjPic"></span>						
						</a>
                    </li>
                    <li class="top-nav-menu">
                        <a href="#">
                            <span class="bgPic webNavPic"></span>
                            <span>网站导航</span>
							<span class="bgPic xsjPic"></span>
                        </a>  
                    </li>
                </ul>
            </div>
        </div>
        <div class="search-wrap">
            <div class="search-con">
                <div class="logo-box">
                    <img src="img/淘宝logo.png" alt=""/>
                </div>
                <div class="search-box">
                    <div class="search-bd">
                        <div class="search-tab">
                            <ul>
                                <li class="select">宝贝</li>
                                <li>天猫</li>
                                <li>店铺</li>
                            </ul>
                        </div>
                        <div class="search-panel">
                            <a href="#" class="sousuo"></a>
                            <form action="">
                                <div class="btn">
                                    <button>搜索</button>
                                </div>
                                <div class="search-inp-box">
                                    <div class="search-inp">
                                        <input type="text" placeholder="五子棋雾化芯">
                                    </div>
                                </div>
                            </form>
                            <a href="#" class="camera"></a>
                        </div>
                    </div>
                    <div class="search-ft">
                        <ul>
                            <li class="select"><a href="#">飞机盒</a></li>
                            <li><a href="#">时尚连衣裙</a></li>
                            <li class="select"><a href="#">夹克外套</a></li>
                            <li><a href="#">新款男鞋</a></li>
                            <li><a href="#">风衣</a></li>
                            <li class="select"><a href="#">男士外套</a></li>
                            <li><a href="#">夹克</a></li>
                            <li><a href="#">衬衫</a></li>
                            <li><a href="#">牛仔裤</a></li>
                            <li><a href="#">保温杯</a></li>
                            <li><a href="#">时尚休闲裤</a></li>
                            <li><a href="#">沙发</a></li>
                            <li><a href="#">男运动鞋</a></li>
                        </ul>
                        <a href="#" class="more">更多>></a>
                    </div>
                </div>
                <div class="code-box">
                    <a href="#" class="p-tb">手机淘宝</a>
                    <a href="#" class="code"></a>
                    <a href="#" class="close">×</a>
                </div>
            </div>
        </div>
        <div class="screen-nav-wrap">
            <div class="screen-nav-con">
                <h2>主题市场</h2>
                <ul>
                    <li><a href="#">天猫</a></li>
                    <li><a href="#">聚划算</a></li>
                    <li><a href="#">天猫超市</a></li>
                </ul>
                <ul>
                    <li>|</li>
                    <li><a href="#">淘抢购</a></li>
                    <li><a href="#">电器城</a></li>
                    <li><a href="#">司法拍卖</a></li>
                    <li><a href="#">淘宝心选</a></li>
                    <li><a href="#">兴农扶贫</a></li>
                </ul>
                <ul>
                    <li>|</li>
                    <li><a href="#">飞猪旅行</a></li>
                    <li><a href="#">智能生活</a></li>
                    <li><a href="#">苏宁易购</a></li>
                </ul>
            </div>
        </div>
        <div class="screen-box-wrap">
            <div class="main">
                <div class="main-inner">
                    <div class="inner-left">
                        <ul>
                            <li>
                                <a href="#">女装</a> /
                                <a href="#">男装</a> /
                                <a href="#">内衣</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">鞋靴</a> /
                                <a href="#">箱包</a> /
                                <a href="#">配饰配件</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">童装玩具</a> /
                                <a href="#">孕产</a> /
                                <a href="#">用品</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">家电</a> /
                                <a href="#">数码</a> /
                                <a href="#">手机</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">美妆</a> /
                                <a href="#">洗护</a> /
                                <a href="#">保健品</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">饰品</a> /
                                <a href="#">珠宝</a> /
                                <a href="#">手表眼镜</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">运动</a> /
                                <a href="#">户外</a> /
                                <a href="#">乐器</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">游戏</a> /
                                <a href="#">动漫</a> /
                                <a href="#">影视</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">美食</a> /
                                <a href="#">生鲜</a> /
                                <a href="#">零食</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">鲜花</a> /
                                <a href="#">宠物</a> /
                                <a href="#">农资</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">工具</a> /
                                <a href="#">装修</a> /
                                <a href="#">建材</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">家具</a> /
                                <a href="#">家饰</a> /
                                <a href="#">家纺</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">汽车</a> /
                                <a href="#">二手车</a> /
                                <a href="#">用品</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">办公</a> /
                                <a href="#">DIY</a> /
                                <a href="#">五金电子</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">百货</a> /
                                <a href="#">餐厨</a> /
                                <a href="#">家庭保健</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">学习</a> /
                                <a href="#">卡券</a> /
                                <a href="#">本地服务</a>
                                <span></span>
                            </li>
                        </ul>
                    </div>
                    <div class="inner-con">
                        <div class="pic-box">
                            <a href="#">
                                <img src="img/轮播图.jpg" alt="">
                            </a>    
                                <ul class="list">
                                    <li><a href="#"></a></li>
                                    <li><a href="#"></a></li>
                                    <li><a class="select" href="#"></a></li>
                                    <li><a href="#"></a></li>
                                    <li><a href="#"></a></li>
                                    <li><a href="#"></a></li>
                                </ul>
                        </div>
                        <div class="inner-mall">
                            <div class="head">
                                <span class="tm-pic"></span>
                                <span class="tm-word">理想生活上天猫</span>
                            </div>
                            <div class="mall-pic">
                                <a href="#">
                                    <img src="img/展示图1.jpg" alt="卫生巾"/>
                                </a>
                                <a class="pic-2"href="#">
                                    <img src="img/展示图2.jpg" alt="洗头膏">
                                </a>
                            </div>    
                        </div>
                    </div>
                </div>
                <div class="col-middle">
                    <a href="#" class="middle-pic1">
                        <img class="side-pic" src="img/inner-pic.png" alt=""/>
                    </a>
                    <div class="middle-pic2">
                        <h5>今日热卖</h5>
                        <a href="#">
                            <img src="img/mall-right.jpg" alt=""/>
                        </a>
                    </div>
                </div>
                <div class="main-bottom">
                    <div class="bottom-con">
                         <div class="logo">
                            <img src="img/淘宝头条.png" alt="淘宝头条">
                         </div>
                        <a class="tbtt-con"href="#">
                            <img src="https://img.alicdn.com/tfscom/i3/TB2.73Dn7omBKNjSZFqXXXtqVXa_!!0-arctic.jpg_120x120q90.jpg_.webp" alt="">
                            <h4>最小摩托骑手3岁半 40度高温学摩托</h4>
                            <p>北京的夏天骄阳似火，室外地表温度逾60度。朝阳区壹号库的汽车艺术园区内，7、8名小摩托车手在教练的陪同下，全副武装练习。</p>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-right">
                <div class="member">
                    <div class="member-bd">
                        <div class="tx">
                            <a href="#">
                                <img src="img/头像.jpg" alt="">
                            </a>
                        </div>
                        <span class="hello">Hi! 你好</span>
                        <p>
                            <a class="icon" href="#">
                                <span class="pic"></span>
                                淘金币领钱
                            </a>
                            <a class="club" href="#">
                                <span class="pic"></span>
                                会员俱乐部
                            </a>
                        </p>
                    </div>
                    <div class="member-ft">
                        <a class="login"href="#">登陆</a>
                        <a href="#">注册</a>
                        <a href="#">开店</a>
                    </div>
                </div>
                <div class="message">
                    <a href="#">
                        网上举报有害信息
                        <span class='square'></span>
                    </a>
                </div>
                <div class="notice">
                    <div class="title">
                        <ul>
                            <li>
                                <a href="#">公告</a>
                            </li>
                            <li>
                                <a href="#">规则</a>
                            </li>
                            <li class="select">
                                <a  href="#">论坛</a>
                            </li>
                            <li>
                                <a href="#">安全</a>
                            </li>
                            <li>
                                <a href="#">公益</a>
                            </li>
                        </ul>
                    </div>
                    <div class="con">
                        <ul>
                            <li>
                                <a class="select" href="#">淘宝嘉年华外围招商</a>
                            </li>
                            <li>
                                <a href="#">中差评功能升级</a>
                            </li>
                            <li>
                                <a href="#">陌生人拼团上线</a>
                            </li>
                            <li>
                                <a href="#">运营神器年中大促</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="moudle">
                    <ul>
                        <li>
                            <a href="#">
                                <span class="pic1 inner"></span>
                                <p>充话费</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="pic2 inner"></span>
                                <p>旅行</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="pic3 inner"></span>
                                <p>车险</p>
                            </a>
                        </li>
                        <li class="right">
                            <a href="#">
                                <span class="pic4 outer"></span>
                                <p>游戏</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="pic5 inner"></span>
                                <p>彩票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="pic6 inner"></span>
                                <p>电影</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="pic7 inner"></span>
                                <p>酒店</p>
                            </a>
                        </li>
                        <li class="right">
                            <a href="#">
                                <span class="pic8 outer"></span>
                                <p>理财</p>
                            </a>
                        </li>
                        <li class="bottom">
                            <a href="#">
                                <span class="pic9 inner"></span>
                                <p>找服务</p>
                            </a>
                        </li>
                        <li class="bottom">
                            <a href="#">
                                <span class="pic10 inner"></span>
                                <p>演出</p>
                            </a>
                        </li>
                        <li class="bottom">
                            <a href="#">
                                <span class="pic11 inner"></span>
                                <p>水电煤</p>
                            </a>
                        </li>
                        <li class="bottom-right">
                            <a href="#">
                                <span class="pic12 outer"></span>
                                <p>火车票</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="app">
                    <h3>阿里APP
                        <a href="#">更多></a>
                    </h3>
                    <ul>
                        <li><a href="#"><img src="img/smalllogo1.png" alt=""></a></li>
                        <li><a href="#"><img src="img/smalllogo2.png" alt=""></a></li>
                        <li><a href="#"><img src="img/smalllogo3.png" alt=""></a></li>
                        <li><a href="#"><img src="img/smalllogo4.png" alt=""></a></li>
                        <li><a href="#"><img src="img/smalllogo5.png" alt=""></a></li>
                        <li><a href="#"><img src="img/smalllogo6.png" alt=""></a></li>
                        <li><a href="#"><img src="img/smalllogo7.png" alt=""></a></li>
                        <li><a href="#"><img src="img/smalllogo8.png" alt=""></a></li>
                        <li><a href="#"><img src="img/smalllogo9.png" alt=""></a></li>
                        <li><a href="#"><img src="img/smalllogo10.png" alt=""></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

</html>